<template>
  <el-container style="position: relative">
    <!-- <SiteTree style="position: fixed" @on-choose-region="filetrStation" /> -->
    <el-main class="realTimeDataContent">
      <!-- <el-card class="lg-mb-20"> -->
      <div
        class="default-main"
        style="
          display: flex;
          justify-content: space-around;
          align-items: center;
        "
      >
        <!-- 设备序列号 -->
        <div>
          <el-input
            v-model="state.comSearch.form.serialNo"
            placeholder="设备序列号"
            maxlength="50"
            @blur="realSearch"
          />
        </div>
        <!-- 部门选择 -->
        <el-tree-select
          v-model="state.comSearch.form.deptId"
          :data="state.deptOptions"
          placeholder="请选择机构"
          :props="{
            label: 'label',
            value: 'id',
            children: 'children',
          }"
          :render-after-expand="false"
          check-strictly
          @change="changeDept"
        />
        <!-- 设备状态选择 -->
        <el-select
          v-model="state.comSearch.form.onlineState"
          @change="changeOnlineState"
          placeholder="设备状态"
          clearable
        >
          <el-option
            v-for="item in bigA.type"
            :key="item.dictCode"
            :label="item.dictLabel"
            :value="item.dictValue - 0"
          />
        </el-select>
      </div>
      <!-- 设备列表数据 -->
      <DeviceList :listData="state.deviceList" />
      <!-- </el-card> -->
    </el-main>
  </el-container>
</template>
<script lang="ts" setup>
import {
  reactive,
  onMounted,
  computed,
  provide,
  ref,
  onBeforeUnmount,
} from "vue";
import _ from "lodash";
import { useAssetSite } from "@/store/backend/Assets/site";
import { useConfig } from "@/store/config"; //后台布局相关仓库
import { useDictionary } from "@/store/backend/tool/dictionary";
import { useWarningItemObject } from "@/store/backend/Warning/itemObject";
import { useAssetCabinet } from "@/store/backend/Assets/cabinet";
import { DictOperation } from "@/utils/common"; // 导入表格api方法生成器
import { useBigBoardA } from "@/store/backend/BigBoard/bigBoard1";
import { useUser } from "@/store/backend/SysM/user";
import { useDeviceRealTime } from "@/store/backend/Monitor/realTime";
import DeviceList from "./components/List.vue";

const site = useAssetSite();
const config = useConfig();
const dictionary = useDictionary();
const realTime = useDeviceRealTime();
const cabinet = useAssetCabinet();
const itemObject = useWarningItemObject();
const bigA = useBigBoardA();
const user = useUser();
const RealTimeRef = ref();

const radio1 = ref("数据");
const radio2 = ref("卧式");

const state: {
  realTimeShow: boolean;
  EchartsShow: boolean;
  titleShow: boolean;
  comSearch: any;
  stateTime: any[];
  isOpen: boolean;
  deptOptions: any[];
  deviceList: any[];
} = reactive({
  realTimeShow: false,
  EchartsShow: false,
  titleShow: true,
  comSearch: { form: {} },
  stateTime: [],
  isOpen: false,
  deptOptions: [], //部门列表
  deviceList: [], //设备数据
});

//限制用户选择日期
const pickerOptions = (time: Date) => {
  // return time.getTime() > Date.now() - 1 * 24 * 60 * 60 * 1000;
  return time.getTime() > Date.now();
};

//初始化字典处理类
const dictOperation = new DictOperation();

//获取机柜类型字典
const getDictionary = () => {
  //获取设备状态的字典
  dictOperation.getDictionary(bigA, "sys_device_status", "onlineState", "type");
  //获取设备历史数据字段
  dictOperation.getDictionary(
    realTime,
    "sys_device_field",
    "fieldName",
    "DefaultFields"
  );
};
getDictionary();

//真实搜索
const realSearch = () => {
  let searchForm = _.cloneDeep(state.comSearch.form);
  //获取设备数据
  getDeviceRealTimeData(searchForm);
};

//选择不同设备状态
const changeOnlineState = (val: any) => {
  console.log("选择不同设备状态", val);
  realSearch();
};
//选择不同机构
const changeDept = (val: any) => {
  console.log("选择不同机构", val);
  realSearch();
};

//获取设备部门数据
const getDeptData = () => {
  user.getDept().then((res: any) => {
    state.deptOptions = res.data;
    console.log("state.deptOptions", state.deptOptions);
  });
};
//获取设备数据接口
const getDeviceRealTimeData = (filter: any) => {
  realTime
    .getListScreen(filter)
    .then((res: any) => {
      state.deviceList = res.rows;
      console.log("实时设备数据", state.deviceList);
    })
    .catch((err: any) => {});
};

// 获取当前月的第一天与当前时间;
const getTime = () => {};
getTime();

const menuWidth = computed(() => config.overviewMenuWidth());

onMounted(() => {
  //获取部门数据
  getDeptData();
  //获取设备数据
  getDeviceRealTimeData(state.comSearch.form);
});

provide("site", site);
provide("config", config);
provide("dictionary", dictionary);
provide("itemObject", itemObject);
provide("cabinet", cabinet);
provide("bigA", bigA);
provide("realTime", realTime);

onBeforeUnmount(() => {});
</script>
<style lang="scss" scoped>
.default-main {
  margin: var(--ba-main-space) var(--ba-main-space) 20px var(--ba-main-space);
}
.realTimeDataContent {
  // margin-left: v-bind(menuWidth);
}
</style>
